<template>
    <div class="box">
        <div class="header"><van-icon name="arrow-left" @click="$router.back" />收货地址</div>
        <van-address-list 
        v-model="chosenAddressId" 
        :list="list" 
        default-tag-text="默认"
        @add="onAdd" 
        @edit="onEdit" 
        v-if="!flag" />

        <!-- 添加地址 -->
        <van-address-edit 
        :address-info="editingAddress"  
        @click-area="onEdit"
        
        v-model="editingAddress" 
        show-delete 
        :area-list="areaList" 
        show-set-default 
        show-search-result
        :area-columns-placeholder="['请选择', '请选择', '请选择']" 
        @save="onSave" 
        @delete="onDelete"
        v-if="flag" 
        class="newOption"  />
        <van-button round block type="primary" @click="goBack" v-if="flag" class="backs">返回</van-button>
    </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { showToast } from 'vant'
const chosenAddressId = ref('1')
const flag = ref(false)
const areaList = ref({
    province_list: {
        110000: '北京市',
        120000: '天津市',
        140000: '山西省',
    },
    city_list: {
        110100: '北京市',
        120100: '天津市',
        140100: '太原市',
        140200: '大同市',
    },
    county_list: {
        110101: '东城区',
        110102: '西城区',
        110105: '朝阳区',
        110106: '丰台区',
        110107: '石景山区',
        110108: '海淀区',
        110109: '门头沟区',
        110111: '房山区',
        110112: '通州区',
        110113: '顺义区',
        110114: '昌平区',
        110115: '大兴区',
        110116: '怀柔区',
        110117: '平谷区',
        110118: '密云区',
        110119: '延庆区',
        120101: '和平区',
        120102: '河东区',
        120103: '河西区',
        120104: '南开区',
        120105: '河北区',
        120106: '红桥区',
        120110: '东丽区',
        120111: '西青区',
        120112: '津南区',
        120113: '北辰区',
        120114: '武清区',
        120115: '宝坻区',
        120116: '滨海新区',
        120117: '宁河区',
        120118: '静海区',
        120119: '蓟州区',
        140101: '市辖区',
        140105: '小店区',
        140106: '迎泽区',
        140107: '杏花岭区',
        140108: '尖草坪区',
        140109: '万柏林区',
        140110: '晋源区',
        140121: '清徐县',
        140122: '阳曲县',
        140123: '娄烦县',
        140181: '古交市',
        140201: '市辖区',
        140202: '城区',
        140203: '矿区',
        140211: '南郊区',
        140212: '新荣区',
        140221: '阳高县',
        140222: '天镇县',
        140223: '广灵县',
        140224: '灵丘县',
        140225: '浑源县',
        140226: '左云县',
        140227: '大同县',
    }
})
// 地址数据
const list = [
    {
        id: '1',
        name: '张三',
        tel: '13000000000',
        address: '浙江省杭州市西湖区 文三路138号东方通信大厦 7 楼 501 室',
        isDefault: true,
        addressDetail: '文三路138号东方通信大厦 7 楼 501 室',
        areaCode: '330102',
        city:'杭州市',
        province:'浙江省',
        county:'西湖区',
    },
    {
        id: '2',
        name: '李四',
        tel: '1310000000',
        address: '浙江省杭州市拱墅区 莫干山路 50 号',
        isDefault: false,
        addressDetail: '莫干山路 50 号',
        areaCode: '330102',
        city:'杭州市',
        province:'浙江省',
        county:'拱墅区',
    },
];
// 新增地址
const onAdd = () => {
    flag.value = true
}
// 编辑地址
const editingAddress = ref({})
const onEdit = async (item: object, index: number) => {
    editingAddress.value = item 
    currentEditingIndex.value = index
    flag.value = true 
}
// 返回
function goBack() {
    flag.value = false
}
// 填写的信息保存按钮
const onSave = (detail:any) => {
    console.log(detail)
    const obj = {
        id: detail.areaCode,
        name: detail.name,
        tel: detail.tel,
        address: detail.province + detail.city + detail.county + detail.addressDetail,
        isDefault: detail.isDefault,
        addressDetail: detail.addressDetail,
        areaCode: detail.areaCode,
        city: detail.city,
        province: detail.province,
        county: detail.county,
    }
    if (obj.isDefault) {
        list.forEach((item: any) => {
            item.isDefault = false
        })
    }
    // 判断是在新增地址还是在编辑地址
    const index = list.findIndex((item: any) => item.id === chosenAddressId.value)
    if (index !== -1) {
        // 如果在编辑地址，则更新地址
        list[index] = obj
    } else {
        // 如果在新增地址，则添加新地址
        list.push(obj)
    }
    flag.value = false
}
// 删除按钮
let currentEditingIndex = ref(-1)
const onDelete = () => {
    if (currentEditingIndex.value > -1) {
        list.splice(currentEditingIndex.value, 1)  // 删除编辑的地址
        showToast('地址已删除');  // 显示删除成功的消息
        // 清空正在编辑的地址，并隐藏编辑器
        editingAddress.value = {}
        currentEditingIndex.value = -1
        flag.value = false
    }
}
</script>
<style lang="scss" setup>
.header {
    .van-icon {
        position: fixed;
        left: 10px;
        top: 15px;
        font-size: 20px;
    }
}

.newOption {
    position: fixed;
    top: 40px;
    left: 0;
    right: 0;
}

.van-address-list__bottom {
    position: static;
}

.van-button--primary {
    background-color: #4bc4b1;
    border-color: #4bc4b1;
}

:root {
    --van-address-list-radio-color: #4bc4b1;
}

.van-tag--primary {
    background-color: #4bc4b1;
    border-color: #4bc4b1;
}

.backs {
    width: 92%;
    position: fixed;
    margin: 0 auto;
    left: 0;
    right: 0;
    bottom: 90px;
}
.van-switch--on{
    background: #4bc4b1;
}
</style>